<template>
    <div class="marketing_group_detail_group">
        <el-button
            type="primary"
            v-auth="'lottery_list:edit'"
            v-if="[1, 2].includes(props.status)"
            class="edit_group_btn"
            @click="editHandler"
            >编辑</el-button
        >
        <el-descriptions :column="1" class="custom-el-desc">
            <template #title><h1>活动设置</h1></template>
            <el-descriptions-item
                v-for="{ label, prop } in commonList"
                :label="label"
                :key="label"
                label-class-name="custom-label">
                {{ form[prop] }}
            </el-descriptions-item>
        </el-descriptions>
        <div>
            <h1 style="margin-bottom: 16px">奖品设置</h1>
            <el-table style="margin-bottom: 35px; width: 1000px" :data="form.luckDrawAward" class="sku-table-s">
                <el-table-column v-for="{ prop, ...rest } in luckDrawAwardCol" :key="prop" :prop="prop" v-bind="rest">
                    <template #default="{ row }">
                        <template v-if="prop === 'awardType'">{{ getTypeName(row[prop]) }} </template>
                        <el-image
                            v-if="prop === 'awardImg'"
                            style="width: 40px; height: 40px"
                            :src="getImgSrcObject(row[prop])"
                            fit="fill"></el-image>
                        <template v-if="prop === 'awardTotalNum'">
                            {{ row.awardTotalNum || row.awardSurplusNum }}
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-descriptions :column="1" class="custom-el-desc">
            <template #title><h1>未中奖设置</h1></template>
            <el-descriptions-item
                v-for="{ label, prop } in notLuckyList"
                :label="label"
                :key="label"
                label-class-name="custom-label-s">
                <el-image
                    style="width: 80px; height: 80px"
                    v-if="prop === 'awardImg'"
                    :src="form?.noLuckyConfig?.[prop] || defaultImg">
                    <template #error>
                        <div class="image-slot">
                            <el-image :src="defaultImg" style="width: 80px; height: 80px" fit="fill" />
                        </div>
                    </template>
                </el-image>
                <template v-else>
                    {{ form?.noLuckyConfig?.[prop] }}
                </template>
            </el-descriptions-item>
        </el-descriptions>
        <!-- todo:转盘设置的预览 -->
        <div>
            <h1 style="margin-bottom: 16px">转盘设置</h1>
            <el-descriptions :column="1" class="custom-el-desc" style="margin-bottom: 10px">
                <el-descriptions-item
                    v-for="{ label, prop } in drawList"
                    :label="label"
                    :key="label"
                    label-class-name="custom-label-s">
                    {{ form[prop] }}
                </el-descriptions-item>
            </el-descriptions>
            <div class="draw-custom-col">
                <el-table
                    style="width: 1000px; margin-bottom: 35px"
                    class="sku-table-s custom-draw-table"
                    :data="form.luckDrawTurntable">
                    <el-table-column v-for="{ prop, ...rest } in turntableCol" :key="prop" :prop="prop" v-bind="rest">
                        <template #default="{ row }">
                            <template v-if="prop === 'awardRelation'">
                                {{ getAwardName(row.awardRelation) }}
                            </template>
                            <el-image
                                v-if="prop === 'img'"
                                style="width: 40px; height: 40px"
                                :src="getImgSrcForId(row.awardRelation) || defaultImg"
                                fit="fill"></el-image>
                            <template v-if="prop === 'awardProbability'">
                                {{ getWeight(row.weight || 0) }}
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="lucky-preview" v-if="form.styleType == 1">
                    <div class="lucky-preview-list">
                        <div class="lucky-preview-list-item" v-for="(item, index) in luckyList" :key="item.id">
                            <el-image
                                v-if="index !== 4"
                                style="width: 60px; height: 60px"
                                :src="getImgSrcForId(item.awardRelation) || defaultImg"
                                fit="fill">
                                <template #error>
                                    <div class="image-slot">
                                        <el-image :src="defaultImg" style="width: 40px; height: 40px" fit="fill" />
                                    </div>
                                </template>
                            </el-image>
                            <div class="default-item-box" v-else>抽奖</div>
                            {{ getAwardName(item.awardRelation) }}
                        </div>
                    </div>
                    <!-- todo:隐藏 -->
                    <div class="lucky-preview-bottom" v-if="form.extraRaffle">
                        <div></div>
                        <div>
                            <p>内容邀请新用户，得抽奖机会（0/1）</p>
                            <p>邀请1名新用户，抽奖机会+1</p>
                        </div>
                        <div>去邀请</div>
                    </div>
                </div>
                <div class="lucky-preview-table" v-else>
                    <div class="lucky-preview-table-list">
                        <div class="left">
                            <div
                                class="lucky-preview-table-list-item circle-left"
                                v-for="item in leftList"
                                :key="item.id">
                                <div class="inner">
                                    <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        :content="getAwardName(item.awardRelation)"
                                        placement="bottom">
                                        <span class="box-item-span">{{ getAwardName(item.awardRelation) }}</span>
                                    </el-tooltip>
                                    <el-image
                                        style="width: 40px; height: 40px"
                                        :src="getImgSrcForId(item.awardRelation) || defaultImg"
                                        fit="fill">
                                        <template #error>
                                            <div class="image-slot">
                                                <el-image
                                                    :src="defaultImg"
                                                    style="width: 40px; height: 40px"
                                                    fit="fill" />
                                            </div>
                                        </template>
                                    </el-image>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div
                                class="lucky-preview-table-list-item circle-right"
                                v-for="item in rightList"
                                :key="item.id">
                                <div class="inner">
                                    <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        :content="getAwardName(item.awardRelation)"
                                        placement="bottom">
                                        <span class="box-item-span">{{ getAwardName(item.awardRelation) }}</span>
                                    </el-tooltip>
                                    <el-image
                                        style="width: 40px; height: 40px"
                                        :src="getImgSrcForId(item.awardRelation) || defaultImg"
                                        fit="fill">
                                        <template #error>
                                            <div class="image-slot">
                                                <el-image
                                                    :src="defaultImg"
                                                    style="width: 40px; height: 40px"
                                                    fit="fill" />
                                            </div>
                                        </template>
                                    </el-image>
                                </div>
                            </div>
                        </div>
                        <!-- <div
                                        class="lucky-preview-table-list-item"
                                        v-for="(item, index) in form.luckDrawTurntable"
                                        :key="item.id">
                                        <div class="inner">
                                            <el-tooltip
                                                class="box-item"
                                                effect="dark"
                                                :content="getAwardName(item.awardRelation)"
                                                placement="bottom">
                                                <span class="box-item-span">{{
                                                    getAwardName(item.awardRelation)
                                                }}</span>
                                            </el-tooltip>
                                            <el-image
                                                style="width: 40px; height: 40px"
                                                :src="getImgSrcForId(item.awardRelation) || defaultImg"
                                                fit="fill">
                                                <template #error>
                                                    <div class="image-slot">
                                                        <el-image
                                                            :src="defaultImg"
                                                            style="width: 40px; height: 40px"
                                                            fit="fill" />
                                                    </div>
                                                </template>
                                            </el-image>
                                        </div>
                                    </div> -->
                    </div>
                    <div class="lucky-preview-table-bottom" v-if="form.extraRaffle">
                        <div></div>
                        <div>
                            <p>内容邀请新用户，得抽奖机会（0/1）</p>
                            <p>邀请1名新用户，抽奖机会+1</p>
                        </div>
                        <div>去邀请</div>
                    </div>
                </div>
            </div>
        </div>
        <el-descriptions :column="1" class="custom-el-desc">
            <template #title><h1>分享设置</h1></template>
            <el-descriptions-item
                v-for="{ label, prop } in shareList"
                :label="label"
                :key="label"
                label-class-name="custom-label-s">
                <el-image style="width: 80px; height: 80px" v-if="prop === 'shareImg'" :src="form[prop] || shareImg">
                    <template #error>
                        <div class="image-slot">
                            <el-image :src="shareImg" style="width: 80px; height: 80px" fit="fill" />
                        </div>
                    </template>
                </el-image>
                <template v-else>
                    {{ form[prop] }}
                </template>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
import { reactive, onMounted, computed } from 'vue';
import request from '@/request/index';
import { useRouter, useRoute } from 'vue-router';
import { cloneDeep } from '@/commons/utils';
import defaultImg from '@/assets/imgs/mall/marketing/not-lucky-share.png';
import shareImg from '@/assets/imgs/mall/marketing/share-default.png';

const router = useRouter();
const route = useRoute();

const luckDrawTurntable = reactive(
    new Array(8).fill({}).map((item, index) => {
        return {
            awardRelation: 1, //奖品和九宫格的关联
            reorder: index, //排序
            weight: null, //权重
            awardProbability: null
        };
    })
);
let form = reactive({
    activityName: '', //活动名称
    activityAt: [], // 开始结束时间
    remark: '', // 抽奖规则
    perPersonNum: null, //每人一共可抽奖
    perPerson: false,
    everyDayNum: 1, //每人每天可抽奖
    award: false,
    awardNum: null, //中奖次数
    extraRaffle: false,
    extraRaffleType: null, //额外抽奖了类型 1 每人 2每天
    extraRaffleNum: null, //额外抽奖次数
    shareCopy: null, //分享文案
    shareImg: 'default', //分享图片
    styleType: 1,
    noLuckyConfig: {
        awardName: '谢谢惠顾',
        awardRelation: 1,
        awardType: 3,
        isDefault: 2,
        awardImg: 'default' // todo:图片
    }, // 未中奖设置
    luckDrawAward: [],
    luckDrawTurntable: luckDrawTurntable // //转盘设置对象
});
const commonList = [
    { name: '', label: '活动名称：', desc: '', prop: 'activityName' },
    { name: '', label: '活动时间：', desc: '', prop: 'activityTime' },
    { name: '', label: '抽奖规则：', desc: '', prop: 'remark' },
    { name: '', label: '抽奖次数：', desc: '', prop: 'perPersonNumText' },
    { name: '', label: '中奖次数：', desc: '', prop: 'awardNumText' },
    { name: '', label: '额外抽奖机会：', desc: '', prop: 'extraRaffleNumText' }
];
const notLuckyList = [
    { name: '', label: '名称：', prop: 'awardName' },
    { name: '', label: '图片：', prop: 'awardImg' }
];
const shareList = [
    { label: '文案：', prop: 'shareCopy' },
    { label: '图片：', prop: 'shareImg' }
];
const drawList = [{ label: '转盘样式：', prop: 'styleTypeText' }];
// todo: 根据后台返回计算普通和高级设置

const luckDrawAwardCol = reactive([
    { label: '奖品类型', prop: 'awardType' },
    { label: '奖品名称', prop: 'awardName', showOverflowTooltip: true },
    { label: '奖品数量', prop: 'awardSurplusNum' },
    { label: '剩余数量', prop: 'awardTotalNum' },
    { label: '转盘图片', prop: 'awardImg' }
]);
const turntableCol = reactive([
    { label: '奖品名称', prop: 'awardRelation', showOverflowTooltip: true, minWidth: '240' },
    { label: '转盘图片', prop: 'img', width: '180' },
    { label: '奖品权重', prop: 'weight', width: '200' },
    { label: '转到概率', prop: 'awardProbability', width: '180' }
]);

const props = defineProps(['id', 'type', 'status']);

const skuTableColumns = reactive([
    { label: '规格', prop: 'specs', width: '159' },
    { label: '售价（元）', prop: 'skuPriceText', width: '160' },
    { label: '拼团价（元）', prop: 'groupPrice', width: '223', fixed: 'right' }
]);
const goodInfo = reactive({
    materialSrc: null
});
let selectData = reactive([]);

const drawSelectList = computed(() => {
    return [...form.luckDrawAward, form.noLuckyConfig];
});

const luckyList = computed(() => {
    const luckDrawTurntable = cloneDeep(form.luckDrawTurntable || []);
    luckDrawTurntable.splice(4, 0, {
        name: '未开始'
    });
    return luckDrawTurntable;
});

const leftList = computed(() => {
    const luckDrawTurntable = cloneDeep(form.luckDrawTurntable);
    return [luckDrawTurntable[2], luckDrawTurntable[3], luckDrawTurntable[4], luckDrawTurntable[5]];
});
const rightList = computed(() => {
    const luckDrawTurntable = cloneDeep(form.luckDrawTurntable);
    return [luckDrawTurntable[1], luckDrawTurntable[0], luckDrawTurntable[7], luckDrawTurntable[6]];
});

const getWeight = val => {
    return `${getWeightVal(val)}%`;
};

const getAwardName = id => {
    return drawSelectList.value?.find(item => item.awardRelation === id)?.awardName;
};

const getWeightVal = val => {
    // 计算权重
    if (!val) {
        return 0;
    }
    const finalVal = form.luckDrawTurntable.reduce((prev, cur) => {
        return prev + cur.weight || 0;
    }, 0);
    return (val * (100 / finalVal)).toFixed(2);
};

const editHandler = () => {
    const path = '/marketing/lottery/edit';
    router.push({
        path,
        query: {
            id: props.id,
            realStatus: route?.query?.realStatus
        }
    });
};

const skuSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
        if (rowIndex === 0) {
            return {
                rowspan: form.goodsSku.length,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    } else {
        return {
            rowspan: 1,
            colspan: 1
        };
    }
};

const getTypeName = type => {
    const types = ['商品', '优惠券'];
    return types[type - 1];
};
const getImgSrc = img => {
    return img?.[0]?.response?.data?.url || defaultImg;
};
const getImgSrcObject = img => {
    if (img?.[0]?.response?.data?.url) {
        return img?.[0]?.response?.data?.url;
    }
    if (!img) {
        return defaultImg;
    }
    if (img === 'default') {
        return defaultImg;
    }
    return img;
};
const getImgSrcForId = id => {
    return getImgSrcObject(drawSelectList.value.find(item => item.awardRelation === id)?.awardImg);
};

const getDetail = async () => {
    const { data } = await request('activityDrawInfo', { id: props.id });
    const { baseInfo, luckDrawConfig, luckDrawAward, luckDrawTurntable } = data;
    const luckDrawAwardList = luckDrawAward.filter(item => item.awardType !== 3);
    let [noLuckyConfig = { awardName: '谢谢惠顾', awardRelation: 1, awardType: 3, isDefault: 2, awardImg: 'default' }] =
        luckDrawAward.filter(item => item.awardType === 3);
    baseInfo.perPerson = !!baseInfo.perPersonNum;
    luckDrawConfig.shareImg = luckDrawConfig.shareImg || 'default';
    luckDrawConfig.extraRaffle = !!(luckDrawConfig.extraRaffleType && luckDrawConfig.extraRaffleNum);
    baseInfo.activityTime = `${baseInfo.activityStartTime} 至 ${baseInfo.activityEndTime}`;
    luckDrawConfig.styleTypeText = luckDrawConfig.styleType == 1 ? '抽签抽奖' : '大转盘';
    luckDrawConfig.perPersonNumText = `每人每天可抽奖${luckDrawConfig.everyDayNum || 0}次；每人一共可抽奖${
        luckDrawConfig.perPersonNum || 0
    }次`;
    luckDrawConfig.awardNumText = `每人中奖${luckDrawConfig.awardNum || '无限'}次`;
    luckDrawConfig.extraRaffleNumText = `邀请1位新用户，可获得1次抽奖机会；${
        luckDrawConfig.extraRaffleType == 1 ? '每人' : '每天'
    }最多可获得${luckDrawConfig.extraRaffleNum || 0}次`;
    Object.assign(form, {
        ...baseInfo,
        ...luckDrawConfig,
        noLuckyConfig,
        luckDrawAward: luckDrawAwardList.map(item => {
            const { awardTotalNum, awardSurplusNum } = item;
            item.awardTotalNum = awardSurplusNum;
            item.awardSurplusNum = awardTotalNum;
            return item;
        }),
        luckDrawTurntable
    });
};

onMounted(() => {
    getDetail();
});
</script>

<style lang="scss">
.sku-table-s {
    display: inline-block;
    border: 1px solid #eaeaea;
    width: 800px;
    .good-preview {
        display: flex;
        align-items: center;
        & > div {
            &:first-of-type {
                margin-right: 8px;
                min-width: 36px;
            }
            &:last-of-type {
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
        }
        h5,
        p {
            margin: 0;
        }
        h5 {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
        }
        p {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
    }
}
</style>
<style lang="scss" scoped>
@mixin background-img($url) {
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url($url);
}

.marketing_group_detail_group {
    position: relative;
    background: #fff;

    :deep .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
        display: flex;
    }

    h1 {
        font-size: 14px;
        font-weight: 500;
        position: relative;
        padding-left: 15px;
        margin: 0;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15%;
            width: 3px;
            height: 70%;
            background-color: var(--el-color-primary);
        }
    }
    .edit_group_btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;
    }
    .custom-el-desc {
        margin-top: 10px;
        margin-bottom: 40px;
    }
    :deep .custom-label {
        width: 110px;
        text-align: right;
        display: inline-block;
        margin-right: 0px;
        color: #969696;
    }
    :deep .custom-label-s {
        text-align: right;
        display: inline-block;
        margin-right: 0px;
        color: #969696;
    }
    :deep {
        .el-descriptions__content {
            max-width: calc(100% - 110px);
            color: #33302d;
        }
    }
    .custom-desc-dev {
        display: flex;
        align-items: center;
        line-height: initial;
    }
    .custom-icon {
        width: 14px;
        height: 14px;
        background: #ffeded;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        :deep .el-icon {
            color: #fe292b;
            width: 11px;
        }
    }

    .custom-checkbox {
        margin-top: 10px;
        padding-left: 19px;
    }

    .draw-custom-col {
        position: relative;
        display: flex;
        min-height: 750px;
        .lucky-preview-table {
            position: absolute;
            right: 0;
            top: -120px;
            z-index: 20;
        }
        .lucky-preview {
            position: absolute;
            right: 0;
            top: -120px;
            z-index: 20;
        }
        .el-table {
            margin-bottom: 0px;
            margin-right: 450px;
        }
    }

    .lucky-preview {
        border: 1px solid #eee;
        width: 390px;
        min-width: 390px;
        max-width: 390px;
        height: 844px;
        @include background-img('@/assets/imgs/mall/marketing/lucky_preview_bg.png');
        &-list {
            position: absolute;
            width: 300px;
            height: 320px;
            margin-top: 230px;
            margin-left: 45px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-row-gap: 10px;
            grid-column-gap: 10px;
            &-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                @include background-img('@/assets/imgs/mall/marketing/luck-single-bg.png');
                color: #76340b;
                font-size: 12px;
                &:nth-of-type(5) {
                    color: #fff;
                    @include background-img('@/assets/imgs/mall/marketing/luck-btn-bg@2x.png');
                    .default-item-box {
                        height: 60px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 28px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #ffffff;
                        line-height: 40px;
                        letter-spacing: 3px;
                        text-shadow: 0px 2px 1px #ba0905;
                    }
                }
                .el-image {
                    margin-bottom: 4px;
                }
            }
        }
        &-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            width: 370px;
            height: 124px;
            bottom: 50px;
            left: 10px;
            padding: 0 15px;
            padding-top: 10px;
            box-sizing: border-box;
            @include background-img('@/assets/imgs/mall/marketing/luck-share-bg@2x.png');
            & > div {
                &:first-of-type {
                    width: 42px;
                    height: 42px;
                    background: #ffffff;
                    border-radius: 50%;
                    @include background-img('@/assets/imgs/mall/marketing/luck-share-person@2x.png');
                    background-size: 26px 23px;
                }
                &:nth-of-type(2) {
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    flex-direction: column;
                    display: flex;
                    color: #ffffff;
                    p {
                        margin: 0;
                    }
                    p:last-of-type {
                        font-size: 13px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                    }
                }
                &:last-of-type {
                    width: 62px;
                    height: 30px;
                    background: linear-gradient(180deg, #fff1ce 0%, #ffb63c 100%);
                    border-radius: 15px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #76340b;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
    .image-slot {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        i {
            font-size: 40px;
        }
    }

    .lucky-preview-table {
        border: 1px solid #eee;
        width: 390px;
        min-width: 390px;
        max-width: 390px;
        height: 844px;
        @include background-img('@/assets/imgs/mall/marketing/lucky_preview_table_bg.png');
        &-list {
            width: 280px;
            height: 280px;
            position: relative;
            border-radius: 140px;
            top: 155px;
            left: 54px;
        }
        .left {
            clip: rect(0px 140px 280px 0px);
            position: absolute;
            right: 0;
            width: 140px;
            height: 280px;
            overflow: hidden;
            & > div {
                & > div {
                    transform-origin: center right;
                    transform: translate(-2px, 35px) rotate(22deg);
                    width: 80px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                }
                &:nth-of-type(1) {
                }
                &:nth-of-type(2) {
                    transform: rotate(45deg);
                }
                &:nth-of-type(3) {
                    transform: rotate(90deg);
                }
                &:nth-of-type(4) {
                    transform: rotate(135deg);
                }
            }
        }
        .right {
            clip: rect(0px 140px 280px 0px);
            position: absolute;
            left: 0;
            width: 140px;
            height: 280px;
            overflow: hidden;
            & > div {
                & > div {
                    transform-origin: center right;
                    transform: translate(55px, -0px) rotate(-30deg);
                    width: 80px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                }
                &:nth-of-type(1) {
                    transform: rotate(360deg);
                }
                &:nth-of-type(2) {
                    transform: rotate(315deg);
                }
                &:nth-of-type(3) {
                    transform: rotate(270deg);
                }
                &:nth-of-type(4) {
                    transform: rotate(225deg);
                }
            }
        }
        .circle-left,
        .circle-right {
            width: 140px;
            height: 280px;
            position: absolute;
            right: 0;
        }
        .circle-left {
            border-radius: 0 140px 140px 0;
            transform-origin: 0 50%;
        }
        .circle-right {
            border-radius: 140px 0 0 140px;
            transform-origin: 100% 50%;
        }
        &-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            width: 370px;
            height: 124px;
            bottom: 60px;
            left: 10px;
            padding: 0 15px;
            padding-top: 10px;
            box-sizing: border-box;
            @include background-img('@/assets/imgs/mall/marketing/luck-share-bg@2x.png');
            & > div {
                &:first-of-type {
                    width: 42px;
                    height: 42px;
                    background: #ffffff;
                    border-radius: 50%;
                    @include background-img('@/assets/imgs/mall/marketing/luck-share-person@2x.png');
                    background-size: 26px 23px;
                }
                &:nth-of-type(2) {
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    flex-direction: column;
                    display: flex;
                    color: #ffffff;
                    p {
                        margin: 0;
                    }
                    p:last-of-type {
                        font-size: 13px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                    }
                }
                &:last-of-type {
                    width: 62px;
                    height: 30px;
                    background: linear-gradient(180deg, #fff1ce 0%, #ffb63c 100%);
                    border-radius: 15px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #76340b;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}
</style>
